<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<title></title>
		<link rel="stylesheet" type="text/css" href="css/swiper-3.3.1.min.css"/>
		<link rel="stylesheet" type="text/css" href="css/animate.min.css"/>
		<link rel="stylesheet" type="text/css" href="css/font-awesome.css"/>
		<style type="text/css">
			*{
				margin:0;
				padding:0;
			}
			html,body{
				width:100%;
				height:100%;
			}
			.swiper-container{
				width:100%;
				height:100%;
			}
			.s1{
				background:cadetblue;
			}
			.s1 .img1{
				display: block;
				width:5rem;
				height:5.5rem;
				margin:0.1rem auto 0;
			}
			.s1 .img2{
				display: block;
				width:3rem;
				height:2rem;
				margin:1.5rem auto 0;
			}
			i{
				color:#fff;	
				display: block;
				/*margin:0  auto;*/
				/*padding-bottom: 1rem;*/
				width:0.5rem;
				height:0.5rem;	
				position: fixed;
				bottom:0.1rem;
				left:45%;
				animation:move 1s 0s linear infinite alternate;
				font-size:0.6rem;
			}
			.swiper-pagination{
				margin-bottom: 2rem;
			}
			@keyframes move{
				0%{
					bottom:0.1rem;
					/*opacity: 1;*/
				}
				100%{
					bottom:0.5rem;
					/*opacity: 0;*/
				}
			}
			.s21,.s22{
				background: blueviolet;
			}
			.s21 .img21{
				display:block;
				width:2.5rem;
				height:2rem;
				margin: 0.2rem auto 0;
			}
			.s21 .img22{
				position: relative;
				display:block;
				width:4rem;
				height:4rem;
				margin:0.7rem auto 0;
				z-index: 1;
			}
			.s21 .img23{
				position: relative;
				display:block;
				width:4rem;
				height:6rem;
				margin: -6.7rem auto 0;
				z-index: 2;
			}
			.s21 .img24{
				position: relative;
				display:block;
				width:3.1rem;
				height:3rem;
				margin:-3rem auto 0;
				z-index: 3;
			}
			.s21 .img25{
				display:block;
				width:3rem;
				height:0.3rem;
				margin:2rem auto 0;
			}
			.s22 .img1,.s32 .img1,.s42 .img1{
				width:4rem;
				height:5rem;
				display: block;
				margin: 0.2rem auto 0;
			}
			.s22 .img2,.s32 .img2,.s42 .img2{
				width:4rem;
				height:1rem;
				display: block;
				margin: 2rem auto 0;
			}
			.s31,.s32{
				background: red;
			}
			.s31 .img21{
				display:block;
				width:3rem;
				height:2rem;
				margin:0.3rem auto 0;
			}
			.s31 .img22{
				position: relative;
				z-index: 1;
				display:block;
				width:4rem;
				height:4rem;
				margin:1rem auto 0;
			}
			.s31 .img23{
				position: relative;
				z-index: 2;
				display:block;
				width:4rem;
				height:1.6rem;
				margin:-2rem auto 0;
			}
			.s31 .img24{
				position: relative;
				z-index: 3;
				display:block;
				width:2rem;
				height:4rem;
				margin:-4rem auto 0;
			}
			.s31 .img25{
				display:block;
				width:3rem;
				height:0.3rem;
				margin:1rem auto 0;
			}
			.s41,.s42{
				background: orange;
			}
			.s41 .img21{
				display: block;
				width:2.5rem;
				height:2rem;
				margin:0.2rem auto 0;
			}
			.s41 .img22{
				position: relative;
				z-index: 1;
				display: block;
				width:3.5rem;
				height:3.5rem;
				margin:1rem auto 0;
			}
			.s41 .img23{
				position: relative;
				z-index: 2;
				display: block;
				width:3.7rem;
				height:3.5rem;
				margin:-3.2rem auto 0;
			}
			.s41 .img24{
				position: relative;
				z-index: 3;
				display: block;
				width:2.8rem;
				height:3rem;
				margin:-3.5rem auto 0;
			}
			.s41 .img25{
				display: block;
				width:3.5rem;
				height:0.3rem;
				margin:1.8rem auto 0;
			}
			.s5{
				background: black;
			}
			.s5 .img21{
				display: block;
				width:4rem;
				height:4rem;
				margin:2.8rem auto 0;
			}
			.s5 .img22{
				display: block;
				width:4rem;
				height:0.8rem;
				margin:1rem auto 0;
			}
			
		</style>
	</head>
	<body>
		<div class="swiper-container">
			    <div class="swiper-wrapper">
			        <div class="swiper-slide s1">
			        	<img src="img/cover.png"/ class="img1">
			        	<img src="img/wording_cover.png"/ class="img2">
			        		<i class="icon-angle-up "></i>
			        </div>
			        <div class="swiper-slide swiper-container1">
			        	 <div class="swiper-wrapper">
			        	 	<div class="swiper-slide s21">
			        	 		<img src="img/wording.png" class="ani img21" swiper-animate-effect="fadeInUp" swiper-animate-duration="2s" swiper-animate-delay="0.5s"/>
			        	 		<img src="img/circle.png" class="ani img22" swiper-animate-effect="bounceInDown" swiper-animate-duration="2s" swiper-animate-delay="0.5s"/>
			        	 		<img src="img/floating_develop.png"  class="img23"/>
			        	 		<img src="img/people.png" class="ani img24" swiper-animate-effect="slideInLeft" swiper-animate-duration="2s" swiper-animate-delay="0.5s"/>
			        	 		<img src="img/check_develop.png" class="ani img25" swiper-animate-effect="zoomIn" swiper-animate-duration="2s" swiper-animate-delay="0.5s"/>
			        	 		<i class="icon-angle-up"></i>
			        	 		
			        	 	</div>
			        	 	<div class="swiper-slide s22">
			        	 		<img src="img/introduction.png" class="ani img1" swiper-animate-effect="zoomIn" swiper-animate-duration="2s" swiper-animate-delay="0.5s"/>
			        	 		<img src="img/btn_develop.png" class="ani img2" swiper-animate-effect="zoomIn" swiper-animate-duration="2s" swiper-animate-delay="0.5s"/>
			        	 		<i class="icon-angle-up"></i>
			        	 	</div>
			        	 </div>
			        	 <!--如果需要分页器--> 
			    <div class="swiper-pagination"></div>
			        </div>
			        <div class="swiper-slide swiper-container1">
			        	<div class="swiper-wrapper">
			        	 	<div class="swiper-slide s31">
			        	 		<img src="img/wording_design.png" class="ani img21" swiper-animate-effect="fadeInUp" swiper-animate-duration="2s" swiper-animate-delay="0.5s"/>
			        	 		<img src="img/circle-design.png" class="ani img22" swiper-animate-effect="bounceInDown" swiper-animate-duration="2s" swiper-animate-delay="0.5s"/>
			        	 		<img src="img/floating_design.png"  class="img23"/>
			        	 		<img src="img/people_design.png" class="ani img24" swiper-animate-effect="slideInUp" swiper-animate-duration="0.5s" swiper-animate-delay="0.5s"/>
			        	 		<img src="img/check_design.png" class="ani img25" swiper-animate-effect="zoomIn" swiper-animate-duration="2s" swiper-animate-delay="0.5s"/>
			        	 		<i class="icon-angle-up"></i>
			        	 		
			        	 	</div>
			        	 	<div class="swiper-slide s32">
			        	 		<img src="img/introduction_design.png" class="ani img1" swiper-animate-effect="zoomIn" swiper-animate-duration="2s" swiper-animate-delay="0.5s"/>
			        	 		<img src="img/btn_design.png" class="ani img2" swiper-animate-effect="zoomIn" swiper-animate-duration="2s" swiper-animate-delay="0.5s"/>
			        	 		<i class="icon-angle-up"></i>
			        	 	</div>
			        	 	
			        	 </div>
			        	<!--如果需要分页器--> 
			    <div class="swiper-pagination"></div>
			        </div>
			        <div class="swiper-slide swiper-container1">
			        	<div class="swiper-wrapper">
			        	 	<div class="swiper-slide s41">
			        	 		<img src="img/wording_production.png" class="ani img21" swiper-animate-effect="fadeInUp" swiper-animate-duration="2s" swiper-animate-delay="0.5s"/>
			        	 		<img src="img/circle-production.png" class="ani img22" swiper-animate-effect="bounceInDown" swiper-animate-duration="2s" swiper-animate-delay="0.5s"/>
			        	 		<img src="img/floating_production.png"  class="img23"/>
			        	 		<img src="img/people_production.png" class="ani img24" swiper-animate-effect="slideInRight" swiper-animate-duration="2s" swiper-animate-delay="0.5s"/>
			        	 		<img src="img/check_production.png" class="ani img25" swiper-animate-effect="zoomIn" swiper-animate-duration="2s" swiper-animate-delay="0.5s"/>
			        	 		<i class="icon-angle-up"></i>
			        	 		
			        	 	</div>
			        	 	<div class="swiper-slide s42">
			        	 		<img src="img/introduction_production.png" class="ani img1" swiper-animate-effect="zoomIn" swiper-animate-duration="2s" swiper-animate-delay="0.5s"/>
			        	 		<img src="img/btn_production.png" class="ani img2" swiper-animate-effect="zoomIn" swiper-animate-duration="2s" swiper-animate-delay="0.5s"/>
			        	 		<i class="icon-angle-up"></i>
			        	 		
			        	 	</div>
			        	 </div>
			        	 <!--如果需要分页器--> 
			    <div class="swiper-pagination"></div>
			        </div>
			        <div class="swiper-slide s5">
			        	<img src="img/pic_back.png" class="ani img21" swiper-animate-effect="zoomInDown" swiper-animate-duration="1s" swiper-animate-delay="0.1s"/>
			        	<img src="img/btn_join.png" class="ani img22" swiper-animate-effect="zoomIn" swiper-animate-duration="1s" swiper-animate-delay="0.1s"/>
			        </div>
			    </div>
			    <!--如果需要分页器--> 
			    <div class="swiper-pagination"></div>  
		</div>
		<script type="text/javascript" src="js/jquery-1.10.1.min.js"></script>
		<script type="text/javascript" src="js/swiper-3.3.1.jquery.min.js"></script>
		<script type="text/javascript" src="js/swiper.animate1.0.2.min.js"></script>
		<script type="text/javascript" src="js/rem.js"></script>
		<script type="text/javascript">
			var myswiper=new Swiper(".swiper-container",{
				direction:"vertical",
				 onInit: function(swiper){ //Swiper2.x的初始化是onFirstInit
				    swiperAnimateCache(swiper); //隐藏动画元素 
				    swiperAnimate(swiper); //初始化完成开始动画
				  }, 
				  onSlideChangeEnd: function(swiper){ 
				    swiperAnimate(swiper); //每个slide切换结束时也运行当前slide动画
				  } 
			})
			var myswiper1=new Swiper(".swiper-container1",{
				direction:"horizontal",
				 // 如果需要分页器
			    pagination: '.swiper-pagination',
				 onInit: function(swiper){ //Swiper2.x的初始化是onFirstInit
				    swiperAnimateCache(swiper); //隐藏动画元素 
				    swiperAnimate(swiper); //初始化完成开始动画
				  }, 
				  onSlideChangeEnd: function(swiper){ 
				    swiperAnimate(swiper); //每个slide切换结束时也运行当前slide动画
				  } 
			})
		</script>
	</body>
</html>
